<template>
  <div ref="listTablePage" class="list-table-page">
    <div class="top-wrapper">
      <h3>学生列表</h3>
    </div>
    <div class="filter-wrapper">
      <el-form ref="filterForm" :model="formData" :inline="true">
        <el-form-item prop="date">
          <el-date-picker
            v-model="formData.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="name">
          <el-input v-model="formData.name" placeholder="请输入名字" />
        </el-form-item>
        <el-form-item prop="sex">
          <el-select v-model="formData.sex" placeholder="请选择性别">
            <el-option label="男" value="male"></el-option>
            <el-option label="女" value="female"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="handle-btn">
          <el-form-item>
            <el-button type="default" size="small" icon="el-icon-question">帮助</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" icon="el-icon-search" @click="submit">
              搜索
            </el-button>
          </el-form-item>
        </el-form-item>
      </el-form>
    </div>
    <div
      v-loading="alding['getListData']"
      class="table-wrapper"
      :style="{ overflow: fixedFilterAndPaginationSet.tableWrapperOverflow }"
    >
      <el-table ref="tableDom" :data="tableData" :height="fixedFilterAndPaginationSet.tableHeight">
        <el-table-column prop="date" label="日期" width="100"></el-table-column>
        <el-table-column prop="name" label="姓名" width="140"></el-table-column>
        <el-table-column prop="sex" label="性别" width="100">
          <template #default="scope">
            {{ getSexLabelByValue(scope.row.sex) }}
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="100"></el-table-column>
        <el-table-column prop="pic" label="照片" width="160">
          <template>
            <el-image
              src="https://casem-file.qa.medlinker.com/1616057318036?imageMogr2/auto-orient"
              :preview-src-list="[
                'https://casem-file.qa.medlinker.com/1616057318036?imageMogr2/auto-orient',
              ]"
            />
          </template>
        </el-table-column>
        <el-table-column prop="desc" label="简介"></el-table-column>
        <el-table-column prop="handle" label="操作" width="240">
          <template #default="scope">
            <el-button
              v-if="scope.row.enable"
              type="text"
              icon="iconfont icon-browse"
              @click="handleClick('edit', scope.row)"
            >
              启用
            </el-button>
            <el-button
              v-else
              type="text"
              default
              icon="iconfont icon-eye-close"
              @click="handleClick('edit', scope.row)"
            >
              禁用
            </el-button>
            <el-button
              type="text"
              icon="iconfont icon-edit"
              @click="handleClick('edit', scope.row)"
            >
              编辑
            </el-button>

            <el-popconfirm
              title="这是一段内容确定删除吗？"
              @confirm="handleClick('del', scope.row)"
            >
              <el-button slot="reference" type="text" danger icon="iconfont icon-ashbin">
                删除
              </el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        background
        :total="total"
        :page-size="formData.pageSize"
        :current-page="formData.page"
        @size-change="pageSizeChange"
        @current-change="pageCurrentChange"
      />
      <EditDrawer
        :visible.sync="editVisible"
        :wrapper-closable="false"
        :close-on-press-escape="false"
        :data="editData"
      />
    </div>
  </div>
</template>
<script>
import Pagination from '@/components/pagination';
import EditDrawer from './components/editDrawer';
import { getSexLabelByValue, pickerOptionsShortcuts, getLastStartEnd } from '@/constants';
export default {
  components: {
    Pagination,
    EditDrawer,
  },
  data() {
    return {
      fixedFilterAndPaginationSet: {
        tableWrapperOverflow: 'hidden', //固定filter和分页：hidden，否则：undefined
        tableHeight: 'calc(100% - 55px)', // 固定filter和分页：calc(100% - 55px)，否则： undefined
      },

      tableData: [],
      formData: {
        date: getLastStartEnd(1, 'days'),
        name: '',
        page: 1,
        pageSize: 20,
      },
      total: 0,
      pickerOptions: {
        shortcuts: pickerOptionsShortcuts.slice(2),
      },
      editVisible: false,
      editData: {},
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getSexLabelByValue,
    submit() {
      this.$refs['filterForm'].validate((valid, err) => {
        if (valid) {
          this.getData();
        }
      });
    },
    getData() {
      this.$api('getListData', { ...this.formData }).then(res => {
        const { list, page, pageSize, total } = res.data || {};
        this.tableData = list;
        this.page = page;
        this.pageSize = pageSize;
        this.total = total;
      });
    },
    handleClick(type, row) {
      switch (type) {
        case 'edit':
          this.editVisible = true;
          break;
      }
    },
    pageSizeChange(size) {
      this.formData.pageSize = size;
      this.formData.page = 1;
      this.getData();
    },
    pageCurrentChange(page) {
      this.formData.page = page;
      this.getData();
      //翻页之后，滚动条到顶部，展示第一行数据
      if (
        this.fixedFilterAndPaginationSet.tableWrapperOverflow === 'hidden' &&
        this.fixedFilterAndPaginationSet.tableHeight.match(/calc/)
      ) {
        this.$refs.tableDom.$el.querySelector('.el-table__body-wrapper').scrollTop = 0;
      } else {
        this.$refs.listTablePage.scrollTop = 0;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.list-table-page {
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  .top-wrapper {
    margin-bottom: 15px;
    h3 {
      margin-bottom: 0;
    }
  }
  .filter-wrapper {
    padding: 15px;
    border-radius: 4px;
    background: #fff;
    form {
      margin-bottom: -18px;
    }
    .handle-btn {
      float: right;
      margin-bottom: -18px;
    }
  }
  .table-wrapper {
    padding: 15px;
    border-radius: 4px;
    background: #fff;
    flex: 1 1 auto;
    .el-button + span {
      margin-left: 10px;
    }
  }
}
</style>
